<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    if (request.getAttribute("messageList") == null) {
        response.sendRedirect("MessageServlet");
        return;
    }
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>留言板 - 分享你的想法</title>
    <!-- Bootstrap 5 CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: #f5f8fa;
            font-family: Arial, sans-serif;
        }
        .board-container {
            max-width: 800px;
            margin: 40px auto;
            background: #fff;
            padding: 36px 32px 30px 32px;
            border-radius: 10px;
            box-shadow: 0 2px 16px rgba(0,0,0,0.09);
        }
        .board-title {
            font-size: 1.55em;
            font-weight: 600;
            margin-bottom: 15px;
            letter-spacing: 1.5px;
            color: #1976d2;
            text-align: center;
        }
        .nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }
        .nav-buttons {
            display: flex;
            gap: 10px;
        }
        .btn-custom {
            background: #1976d2;
            color: white;
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
            transition: background 0.2s;
        }
        .btn-custom:hover {
            background: #145ca6;
            color: #fff;
        }
        .search-bar {
            margin-bottom: 24px;
        }
        .post-form textarea {
            resize: vertical;
            min-height: 54px;
        }
        .message-card {
            border: 1px solid #eee;
            border-radius: 7px;
            background: #fafbfc;
            padding: 18px 22px 12px 22px;
            margin-bottom: 20px;
            box-shadow: 0 1px 4px #f1f1f1;
        }
        .message-header {
            display: flex;
            align-items: center;
            margin-bottom: 7px;
        }
        .avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            margin-right: 12px;
            object-fit: cover;
            border: 1.5px solid #ccc;
        }
        .username {
            font-weight: bold;
            margin-right: 10px;
            color: #1976d2;
        }
        .time {
            color: #888;
            font-size: 0.98em;
            margin-left: auto;
        }
        .message-content {
            margin: 9px 0 7px 0;
            font-size: 1.08em;
            word-break: break-all;
        }
        .msg-actions button, .msg-actions a {
            margin-right: 7px;
        }
        .msg-actions .btn-sm {
            font-size: 0.93em;
        }
        .stats {
            text-align: right;
            color: #666;
            font-size: 0.98em;
            margin-bottom: 8px;
        }
        .error {
            color: red;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="board-container shadow">
    <div class="board-title"><i class="fa fa-comments"></i> 留言板</div>

    <!-- 顶部导航栏 -->
    <div class="nav">
        <c:if test="${not empty sessionScope.username}">
            <span>欢迎，${sessionScope.username}</span>
            <div class="nav-buttons">
                <a href="profile.jsp" class="btn-custom">个人信息</a>
                <a href="logout" class="btn-custom">退出</a>
            </div>
        </c:if>
        <c:if test="${empty sessionScope.username}">
            <div class="nav-buttons">
                <a href="login.jsp" class="btn-custom">登录</a>
                <a href="register.jsp" class="btn-custom">注册</a>
            </div>
        </c:if>
    </div>

    <!-- 搜索栏 -->
    <form class="row g-2 align-items-center search-bar" action="MessageServlet" method="get">
        <input type="hidden" name="action" value="search">
        <div class="col-auto">
            <input type="text" class="form-control" name="keyword"
                   placeholder="搜索留言..." value="${param.keyword}">
        </div>
        <div class="col-auto">
            <button type="submit" class="btn btn-outline-primary">
                <i class="fa fa-search"></i> 搜索
            </button>
        </div>
    </form>


    <!-- 发布留言表单 -->
    <c:if test="${not empty sessionScope.username}">
        <form class="post-form mb-4" action="MessageServlet" method="post">
            <input type="hidden" name="action" value="add">
            <div class="mb-3">
                <textarea class="form-control" name="content" maxlength="400" required placeholder="发表你的留言..."></textarea>
            </div>
            <div class="text-end">
                <button type="submit" class="btn btn-success"><i class="fa fa-paper-plane"></i> 发布留言</button>
            </div>
        </form>
    </c:if>

    <!-- 留言统计 -->
    <div class="stats mb-2">
        共 <span class="text-primary fw-bold">${messageCount}</span> 条留言
        <c:if test="${not empty keyword}">，搜索关键词：<span class="text-danger">${keyword}</span></c:if>
    </div>

    <!-- 留言列表 -->
    <c:forEach var="msg" items="${messageList}">
        <div class="message-card">
            <div class="message-header">
<%--                <img class="avatar" src="${msg.user.avatar}" alt="头像">--%>
                <img class="avatar" src="${sessionScope.user.avatar}" alt="头像">
<%--                <span class="username">${msg.user.username}</span>--%>
                <span class="username">${sessionScope.user.username}</span>
                <span class="time">${msg.createdAt}</span>
            </div>
            <!-- 留言内容（修改点：escapeXml="false"） -->
            <div class="message-content">
                <c:out value="${msg.content}" escapeXml="false" />
            </div>

            <div class="msg-actions mb-1">
                <a href="message_edit.jsp?msgId=${msg.id}&action=reply" class="btn btn-outline-secondary btn-sm"><i class="fa fa-reply"></i> 回复</a>
                <c:if test="${sessionScope.user != null && (sessionScope.user.id == msg.user.id || sessionScope.user.role == 2)}">
                    <a href="message_edit.jsp?msgId=${msg.id}&action=edit" class="btn btn-outline-primary btn-sm"><i class="fa fa-edit"></i> 编辑</a>
                    <a href="MessageServlet?action=delete&msgId=${msg.id}" class="btn btn-outline-danger btn-sm" onclick="return confirm('确定要删除这条留言吗？');"><i class="fa fa-trash"></i> 删除</a>
                </c:if>
                <form action="MessageServlet" method="post" class="d-inline">
                    <input type="hidden" name="action" value="like">
                    <input type="hidden" name="msgId" value="${msg.id}">
                    <button type="submit" class="btn btn-outline-warning btn-sm">
                        <i class="fa fa-thumbs-up"></i>
                        <span>${msg.likeCount}</span>
                    </button>
                </form>
            </div>
            <!-- 回复列表（修改点：escapeXml="false"） -->
            <c:if test="${not empty msg.replies}">
                <div class="replies">
                    <c:forEach items="${msg.replies}" var="reply">
                        <div class="reply">
                            <span>${reply.user.username}:</span>
                            <c:out value="${reply.content}" escapeXml="false" />
                        </div>
                    </c:forEach>
                </div>
            </c:if>
        </div>
    </c:forEach>

    <!-- 分页栏 -->
    <nav>
        <ul class="pagination justify-content-center">
            <c:if test="${currentPage > 1}">
                <li class="page-item">
                    <a class="page-link" href="MessageServlet?page=${currentPage-1}&keyword=${param.keyword}">上一页</a>
                </li>
            </c:if>
            <c:forEach begin="1" end="${totalPages}" var="i">
                <li class="page-item ${i == currentPage ? 'active' : ''}">
                    <a class="page-link" href="MessageServlet?page=${i}&keyword=${param.keyword}">${i}</a>
                </li>
            </c:forEach>
            <c:if test="${currentPage < totalPages}">
                <li class="page-item">
                    <a class="page-link" href="MessageServlet?page=${currentPage+1}&keyword=${param.keyword}">下一页</a>
                </li>
            </c:if>
        </ul>
    </nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>